<template>
  <div class="numberMain">
    <div class="mainContent">
      <button v-for="num in numbers" :value="num" @click="handleClick(num)">
        {{ num }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 0, ".", "退格"]);
const display = ref("");
const router = useRouter();
const emit=defineEmits(['value'])
const handleClick = (num) => {
  //   console.log("num", num);
  display.value += num.toString();
  console.log("va", display.value);

  emit('value',display.value)
//   router.push({
//     path: "/Monistor_Setting",
//     query: { displayValue: display.value },
//   });
  //   router.push({path:`/Monistor_Setting/${display.value}`})
};
</script>
<style scoped lang="less">
.numberMain {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: center;  
  //   flex-wrap: wrap;
  .mainContent {
    height: 75%;
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    button {
      margin: 2vw;
      width: 7vw;
      height: 8vh;
      background: rgb(220, 220, 220);
      border-radius: 0.5vh;
      border: 0ch;
      font-weight: 900;
      font-size: 2vh;
    }
  }
}
</style>